import React from 'react';
import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import Header from '../components/Header';
import Seo from '../components/SEO';

export default function Product({ data }) {
  console.log('Product props.data :', data);
  return (
    <>
      <Seo title="产品列表" />
      <Header />
      <ul>
        {data.allProductsJson.nodes.map((node) => (
          <li key={node.id}>
            <p>
              {node.title} —— ¥{node.price} —— {node.address}
            </p>
            <GatsbyImage
              image={getImage(node.url.childImageSharp.gatsbyImageData)}
              alt={node.title}
            />
            <img src={node.url.childImageSharp.fixed.src} alt={node.title} />
          </li>
        ))}
      </ul>
    </>
  );
}

// export const query = graphql`
//   query {
//     allProductsJson {
//       nodes {
//         id
//         title
//         price
//         address
//         url {
//           childImageSharp {
//             gatsbyImageData
//           }
//         }
//       }
//     }
//   }
// `;

export const query = graphql`
  query {
    allProductsJson {
      nodes {
        id
        title
        price
        address
        url {
          childImageSharp {
            gatsbyImageData
            fixed(width: 200, height: 200) {
              height
              width
              src
              srcSet
            }
          }
        }
      }
    }
  }
`;
